<template>
    <div class="main_team">
        <div class="team_list">
            <div class="team_item" v-for="item in teamList" :key="item.id">
                <h5>{{ item.title }}</h5>
                <p>{{ item.desc }}</p>
                <el-button type="primary" @click="createTeam(item.type)">{{ item.btnName }}</el-button>
            </div>
        </div>
        <div class="team_table_wrapper">
            <div class="tableData_filter">
                <el-form :inline="true" :model="tableParams" class="demo-form-inline">
                    <el-form-item>
                        <el-select v-model="tableParams.type" placeholder="全部类型">
                            <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="tableParams.status" placeholder="全部类型">
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="tableParams.keyword" placeholder="搜索活动名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="searchTableData">搜索</el-button>
                    </el-form-item>
                </el-form>                
            </div>
            <div class="team_table">
                <el-table :data="teamworkData" border style="width: 100%">
                    <el-table-column  prop="name" label="活动名称" width="240"></el-table-column>
                    <el-table-column  prop="type" label="活动类型" width="240"></el-table-column>
                    <el-table-column  prop="group_price" label="活动价格（元）" width="200"></el-table-column>
                    <el-table-column  prop="status" label="状态" width="180"></el-table-column>
                    <el-table-column label="有效时间" width="200">
                        <template slot-scope="{row}">
                            起：{{ row.start_time }}<br />
                            止：{{ row.end_time }}
                        </template>
                    </el-table-column>
                    <el-table-column  prop="hasNumber" label="已成团数" width="200"></el-table-column>
                    <el-table-column  prop="total" label="总团数" width="200"></el-table-column>
                    <el-table-column  fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="viewRowsDetails(scope.row)" type="text" size="small" v-if="scope.row.status == '进行中' || scope.row.status == '已失效' || scope.row.status == '已结束'">效果数据</el-button>
                            <span v-if="scope.row.status !== '已失效'">
                                <el-button type="text" size="small" @click="editRow(scope.row)" v-if="scope.row.status !== '已结束'">编辑</el-button>
                                <el-button type="text" size="small" @click="promotion(scope.row)" v-if="scope.row.status == '未开始' || scope.row.status == '进行中'" >推广</el-button>
                                <el-button type="text" size="small" @click="lose(scope.row)" v-if="scope.row.status  !== '已结束'">失效</el-button>
                            </span>                            
                            <el-button type="text" size="small" @click="deleteRows(scope.row)" v-if="scope.row.status == '已失效' || scope.row.status == '已结束'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="teamwork_pagination">
                <el-pagination
                    @size-change="teamWorkSizeChange"
                    @current-change="teamWorkCurrentChange"
                    :current-page="tableParams.curpage"
                    :page-sizes="[10,20,30,40,50]"
                    :page-size="tableParams.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="teamWorkTotal">
                </el-pagination>
            </div>            
        </div>
        <el-dialog
            title="分享"
            :visible.sync="dialogShareVisible"
            :close-on-click-modal="false"
            width="600px"
            :before-close="handleCloseShare">
            <div class="share_body">
                <div class="share_item">
                    <label>短链接</label>
                    <div class="share_setting">
                        <el-input v-model="shareParams.slowPath"></el-input>
                        <el-button type="primary" @click="copyLink(0)">复制</el-button>
                    </div>
                    <div class="share_setting_item_desc">
                        <span>可分享至</span>
                        <img src="" alt="QQ" />
                        <img src="" alt="wechat" />
                        <span>中使用</span>
                    </div>
                </div>
                <div class="share_item">
                    <label>原链接</label>
                    <div class="share_setting">
                        <el-input v-model="shareParams.oldPath"></el-input>
                        <el-button type="primary" @click="copyLink(1)">复制</el-button>
                    </div>
                </div>
                <div class="share_item">
                    <label>二维码</label>
                    <div class="share_setting">
                        <qriously id="qrCode" :value="shareParams.qrCodeUrl" :size="200" :backgroundAlpha="1" />
                        <el-button @click="downLoadCode">下载</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            :visible.sync="dialogLoseVisible"
            :close-on-click-modal="false"
            width="30%"
            center>
            <div class="lose_body">
                <p class="user_tooltip">确认让该拼团活动失效吗？</p>
                <dl class="message">
                    <dd>- 失效后，活动立即结束且不可再编辑。</dd>
                    <dd>- 若未开启模拟成团，未成团订单将自动关闭并退款。</dd>
                    <dd>- 若已开启模拟成团，未成团订单将立即模拟成团</dd>
                </dl>
            </div>            
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelLose">取 消</el-button>
                <el-button type="primary" @click="sureLose">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="dialogDeleteVisible"
            :close-on-click-modal="false"
            width="30%"
            center>
            <div class="lose_body">
                <p class="user_tooltip">确认删除该拼团活动吗？</p>
            </div>            
            <span slot="footer" class="dialog-footer">
                <el-button @click="canceDelete">取 消</el-button>
                <el-button type="primary" @click="sureDelete">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { api_teamWorkTableList,api_teamWorkTableCellLose,api_teamWorkTableCellDelete,api_teamWorkTableCellEdit } from '../../api/index';
export default{
    data(){
        return {
            teamList: [
                {
                    id: '012',
                    title: '普通拼团',
                    desc: '用户下单开团以后，邀请好友拼团以优惠价格购买，提升店铺转化',
                    btnName: '立即创建',
                    type: 0 
                },
                {
                    id: '013',
                    title: '邀新拼团',
                    desc: '新老用户都可下单开团，仅限新用户参团开苏裂变获取新客',
                    btnName: '立即创建',
                    type: 1
                },
                {
                    id: '014',
                    title: '阶梯拼团',
                    desc: '人数越多价格越低，用低价刺激用户发起拉人更多的拼团，高效裂变',
                    btnName: '立即创建',
                    type: 2
                }
            ],
            typeOptions: [
                { value: '', label: '全部类型' },
                { value: 0, label: '普通拼团' },
                { value: 1, label: '邀新拼团' },
                { value: 2, label: '阶梯拼团' },
            ],
            statusOptions: [
                { value: '', label: '全部状态' },
                { value: 0, label: '未开始' },
                { value: 1, label: '进行中' },
                { value: 2, label: '已结束' },
                { value: 3, label: '已失效' },
            ],
            tableParams: {
                type: '',
                status: '',
                keyword: '',
                curpage: 1,
                pagesize: 10
            },
            teamworkData: [],
            dialogShareVisible: false,
            dialogLoseVisible: false,
            dialogDeleteVisible: false,
            teamWorkTotal: 80, 
            rowInfo: {},
            shareParams: {
                slowPath: 'https://augqo.xet.tech/s/cqPDe',
                oldPath: '',
                qrCodeUrl: '',
            },
        }
    },
    created(){
        this.initTeamWorkTableList();
    },
    mounted(){
    },
    methods: {
        initTeamWorkTableList(){    // 拼团表格列表数据
            api_teamWorkTableList(this.tableParams).then(res => {
                // console.log('拼团列表：',res);
                if (res.code == 1) {
                    this.teamworkData = res.data.data;
                    this.teamWorkTotal = res.data.total;
                } else {
                    this.$message({
                        type: 'warning',
                        message: res.msg
                    })
                }
            })
        },
        searchTableData(){  // 表格筛选搜索
            console.log('当前表格筛选参数：',this.tableParams);
            this.tableParams.curpage = 1;
            this.initTeamWorkTableList();
        },
        teamWorkSizeChange(val) {   
            console.log(`每页 ${val} 条`);
            this.tableParams.curpage = 1;
            this.tableParams.pagesize = val;
            this.initTeamWorkTableList();
        },
        teamWorkCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.tableParams.curpage = val;
            this.initTeamWorkTableList();
        },
        createTeam(n){  // 立即创建
            this.$router.push({
                path: '/teamwork/create_team',
                query: {
                    type: 'create',
                    teamType: n
                }
            });
            console.log(this.$router)
        },
        viewRowsDetails(rows){ // 数据表格行效果数据
            console.log('当前行数据',rows);
            this.$router.push({
                path: '/teamwork/view_team',
                query: {
                    type: 'view',
                    id: rows.id,
                }
            })
        },
        editRow(rows){  // 数据表格行编辑
            console.log('当前行数据',rows);
            let obj = {
                '普通拼团': 0,
                '邀新拼团': 1,
                '阶梯拼团': 2
            };
            this.$router.push({
                path: '/teamwork/create_team',
                query: {
                    type: 'edit',
                    id: rows.id,
                    teamType: obj[rows.type]
                }
            })
        },
        promotion(rows){    // 数据表格行推广
            console.log('推广：',rows);
            this.dialogShareVisible = true;
            // let baseURL = 'https://www.nashicike.top/xuejing/';
            let baseURL = 'http://localhost/xuejing/';
            let fileType = { '普通拼团': 0,'邀新拼团': 1,'阶梯拼团': 2 };
            let shop_domainname = localStorage.getItem('domainname');
            // if (rows.goods_type == 'column') {
            //     this.shareParams.oldPath = `${baseURL}product/${shop_domainname}?domainname=${shop_domainname}&id=${rows.goods_id}`;
            // } else {
            //     this.shareParams.oldPath = `${baseURL}${rows.goods_type}content/${shop_domainname}?domainname=${shop_domainname}&id=${rows.goods_id}`;
            // }
            this.shareParams.oldPath = `${baseURL}share_detail/${shop_domainname}?domainname=${shop_domainname}&id=${rows.id}&goods_id=${rows.goods_id}&type=${fileType[rows.type]}&goods_type=${rows.goods_type}`
            this.shareParams.qrCodeUrl = this.shareParams.oldPath;
            console.log('二维码链接：',this.shareParams.qrCodeUrl);
        },  
        lose(rows){ // 数据表格行失效
            console.log('失效：',rows);
            this.rowInfo = rows;
            this.dialogLoseVisible = true;
        },
        deleteRows(rows){    // 数据表格行删除
            console.log('删除：',rows);
            this.rowInfo = rows;
            this.dialogDeleteVisible = true;
        },
        handleCloseShare(){ // 分享弹框关闭
            this.dialogShareVisible = false;
        },
        cancelLose(){   // 失效弹框取消
            console.log('取消失效');
            this.dialogLoseVisible = false;
        },
        canceDelete(){  // 删除弹框取消
            console.log('取消删除');
            this.dialogDeleteVisible = false;
        },
        sureLose(){ // 失效弹框确认
            console.log('确认失效');
            api_teamWorkTableCellLose({id: this.rowInfo.id}).then(res => {
                if (res.code == 1) {
                    this.$message.success(res.msg);
                    this.dialogLoseVisible = false;
                    this.initTeamWorkTableList();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        sureDelete(){   // 删除弹框确认
            console.log('确认删除');
            api_teamWorkTableCellDelete({id: this.rowInfo.id}).then(res => {
                if (res.code == 1) {
                    this.$message.success(res.msg);
                    this.dialogDeleteVisible = false;
                    this.initTeamWorkTableList();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        copyLink(n){ // 分享弹框复制
            let oInput = document.createElement('input');
            document.body.appendChild(oInput);
            if (n == 0) {
                oInput.value = this.shareParams.slowPath;
                oInput.select();
                document.execCommand('copy');
                this.$message.success('复制成功');
                oInput.remove();
            }
            if (n == 1) {
                document.body.appendChild(oInput);
                oInput.value = this.shareParams.oldPath;
                oInput.select();
                document.execCommand('copy');
                this.$message.success('复制成功');
                oInput.remove();
            }
        },
        downLoadCode(){ // 分享弹框下载
            let oA = document.createElement('a');
            let oCanvas = document.getElementsByTagName('canvas')[0];
            let url = oCanvas.toDataURL("image/png");
            oA.style.display = 'none';
            document.body.appendChild(oA);
            oA.href = url;
            oA.download = '二维码.png';
            oA.click();
            document.body.removeChild(oA);
        },
    }
}
</script>

<style lang="scss" scoped>
.main_team{
    .team_list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        .team_item{
            width: 32%;
            text-align: center;
            padding: 20px;
            border-radius: 3px;
            background-color: #F6F7FB;
            h5{
                font-size: 16px;
                line-height: 36px;
            }
            p{
                font-size: 12px;
                color: #666666;
                margin: 0 0 15px 0;
            }
            .el-button{
                
            }
        }
        .team_item:nth-child(2){
            margin: 0 2%;
        }
    }
    .team_table_wrapper{
        margin: 15px 0;
        .tableData_filter{
            float: right;
        }
        .team_table{

        }
        .teamwork_pagination{
            float: right;
            margin: 10px 0 0 0;
        }
    }
    .share_body{
        .share_item{
            margin: 0 0 20px 0;
            overflow: hidden;
            label{
                float: left;
                font-size: 13px;
                line-height: 40px;
                margin: 0 20px 0 0;
            }
            .share_setting{
                float: left;
                ::v-deep .el-input{
                    width: 400px;               
                    .el-input__inner{
                        width: 400px;
                        border-radius: 3px 0 0 3px;
                    }
                }
                .el-button{
                    border-radius: 0 3px 3px 0;
                }
            }
            .share_setting_item_desc{
                clear: both;
                margin: 0 0 0 60px;
            }
        }
    }
    .lose_body{
        .user_tooltip{
            text-align: center;
            font-size: 16px;
            margin: 0 0 30px 0;
        }
        .message{
            font-size: 13px;
            color: #999;
        }
    }
}
</style>